<template>
  <div style="margin: 5px 0">
    <!--  顶框内容按钮  -->
    <div class="header" style="margin: 5px 0 0 0 ">
      <!-- 按钮栏 -->
      <el-form ref="queryForm" size="mini" :inline="true">
        <el-input prefix-icon="el-icon-search" size="mini" style="width: 210px"
                  v-model="taskName" placeholder="根据任务名称模糊搜索" @clear="clearForm"
                  clearable>
        </el-input>
        <el-button style="margin-left: 5px" size="mini" type="primary" icon="el-icon-search" @click="getRobotTaskPageList">搜索</el-button>
        <el-button style="margin: 5px" size="mini" type="primary" icon="el-icon-plus" @click="openCreate">新增</el-button>
      </el-form>
      <column-manager :columns="tbColumn" @refreshColumns="refreshColumns">
      </column-manager>
    </div>

    <!-- 表格,分页 栏 -->
    <div style="margin: 5px 0 0 0; width: 100%">
      <el-table
        :height="'73vh'"
        ref="multipleTable"
        :data.sync="table.data"
        :stripe=true
        :border=true
      >
        <el-table-column
          v-for="(item,index) in tbColumn.filter(item => item.enabled && item.show)"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align=item.align
        >
          <template v-if="item.prop === 'enable'" #default="{row, column, $index}">
            <el-switch
              :value="row.enable === 1"
              :active-color="row.enable === 1 ? '#13ce66' : '#cccccc'"
              :inactive-color="row.enable === 1 ? '#13ce66' : '#cccccc'"
              @change="updateEnable(row.id)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="200"
        >
          <template #default="{row, column, $index}">
            <el-button style="color: #70a1ff;font-weight: bold" size="mini" type="text" icon="el-icon-edit"
                       @click="openUpdate(row)">
              修改
            </el-button>
            <el-popconfirm
              style="margin-left: 10px"
              title="删除此内容吗？"
              @confirm="delTableRow(row.id)"
            >
              <el-button style="color: #ff4757;font-weight: bold" slot="reference" size="mini" type="text"
                         icon="el-icon-delete">
                删除
              </el-button>
            </el-popconfirm>
          </template>

        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div style="margin: 50px 0 0 0">
        <el-pagination
          background
          :page-sizes="[10, 30, 50, 100]"
          :page-size="table.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="table.total"
          :page-count="table.pages"
          :current-page="table.current"
          @size-change="table.handleSizeChange"
          @current-change="table.handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 弹出栏位 -->
    <el-dialog
      title="添加/修改任务"
      :visible.sync="dialogVisible"
      width="45%">
      <el-form label-width="100px" :model="ruleForm" :rules="rules">
        <el-form-item label="任务名称" prop="name">
          <el-input
            type="name"
            v-model="ruleForm.name"
            placeholder="请输入任务名称"
            :show-word-limit=true
          ></el-input>
        </el-form-item>

        <el-form-item label="任务页面路由" prop="viewRouter" label-width="125px">
          <el-input
            type="viewRouter"
            v-model="ruleForm.viewRouter"
            placeholder="请输入任务页面路由"
            :show-word-limit=true
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
          <el-button type="info" @click="cancel">取消</el-button>
          <el-button type="primary" @click="commit">提交</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>

import { isNull } from "@/utils/service";
import { getRobotTaskPageList, modifyStatus, updateTask, commitTask, taskDel } from "@/views/robot/taskManage/api";
import TbColumn  from "@/components/table/tbColumn";
import ColumnManager from "@/components/table/columnManager.vue";

export default {
  name: "taskManage",
  components: { ColumnManager },
  computed: {},
  mounted() {
    this.getRobotTaskPageList();
  },
  data() {
    let _vm = this;
    return {
      taskName: "",
      ruleForm: {
        id: void 0,
        name: "",
        viewRouter: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }
        ],
        viewRouter: [
          { required: true, message: "请输入任务路由", trigger: "blur" },
          { min: 2, max: 60, message: "长度在 5 到 60 个字符", trigger: "blur" }
        ]
      },
      dialogVisible: false,
      table: {
        tbLoading: false,
        /* 选中行数据 */
        sRows: [],
        data: [],
        pageNo: 1,
        pages: 0,
        pageSize: 10,
        pageCount: 0,
        sortField: "",
        sortMode: void 0,
        handleSizeChange(pageSize) {
          if (pageSize === _vm.table.pageSize) {
            return;
          }
          _vm.table.pageSize = pageSize;
          _vm.getRobotTaskPageList();
        },
        handleCurrentChange(pageNo) {
          if (pageNo === _vm.table.pageNo) {
            return;
          }
          _vm.table.pageNo = pageNo;
          _vm.getRobotTaskPageList();
        },
        sRowChange(rows) {
          _vm.table.sRows = rows;
        }
      },
      tbColumn: [
        new TbColumn("任务名称", "name", { width: "450", align: "center" }),
        new TbColumn("任务页面路由", "viewRouter", { align: "center" }),
        new TbColumn("是否启动", "enable", { align: "center", width: "100" }),
        new TbColumn("创建时间", "createTime", {
          align: "center",
          width: "200",
          formatter: this.replaceCharacter,
          sortable: true
        }),
        new TbColumn("修改时间", "updateTime", {
          align: "center",
          width: "200",
          formatter: this.replaceCharacter,
          sortable: true,
        })
      ]
    };
  },

  methods: {
    refreshColumns(columns) {
      this.tbColumn = [...columns];
    },
    isNull,
    openCreate() {
      this.ruleForm.name = "";
      this.ruleForm.viewRouter = "";
      this.callFunc = "createFunc";
      this.dialogVisible = true;
    },
    openUpdate(row) {
      this.ruleForm.id = row.id;
      this.callFunc = "updateFunc";
      this.dialogVisible = true;
    },
    commit() {
      if (this.callFunc === "createFunc") {
        this.createFunc();
      }
      if (this.callFunc === "updateFunc") {
        this.updateFunc();
      }
    },
    createFunc() {
      // 新增数据
      let params = {
        name: this.ruleForm.name,
        viewRouter: this.ruleForm.viewRouter
      };
      commitTask(this, params, () => {
        this.$message.success("提交成功");
        // 提交成功关闭弹出框
        this.ruleForm.name = "";
        this.ruleForm.viewRouter = "";
        this.dialogVisible = false;
        // 添加成功后刷新页面
        this.getRobotTaskPageList();
      });
    },
    updateFunc() {
      // 修改数据
      let params = {
        id: this.ruleForm.id,
        name: this.ruleForm.name,
        viewRouter: this.ruleForm.viewRouter
      };
      updateTask(this, params, () => {
        this.$message.success("提交成功");
        // 提交成功关闭弹出框
        this.ruleForm.name = "";
        this.ruleForm.viewRouter = "";
        this.dialogVisible = false;
        // 修改成功后刷新页面
        this.getRobotTaskPageList();
      });
    },
    replaceCharacter(row, column, cellValue, index) {
      return !isNull(cellValue) ? cellValue : "-";
    },
    updateEnable(id) {
      let param = { id: id };
      modifyStatus(this, param, () => {
        this.$message.success("修改成功");
        // 修改成功后刷新页面
        this.getRobotTaskPageList();
      });
    },
    delTableRow(id) {
      console.log("id", id);
      let param = { id: id };
      taskDel(this, param, () => {
        this.$message.success("删除任务成功");
        this.getRobotTaskPageList();
      });
    },
    getRobotTaskPageList() {
      let params = {
        pageNo: this.table.pageNo,
        pageSize: this.table.pageSize,
        name: this.taskName
      };
      this.table.loading = true;
      getRobotTaskPageList(params).then((res) => {
        this.table.data = res.list;
        this.table.pages = res.pages;
        this.table.total = res.total;
      }).finally(() => {
        this.table.loading = false;
      });
    },
    clearForm() {
      this.taskName = "";
      this.getRobotTaskPageList();
    },
    cancel() {
      this.dialogVisible = false;
    }
  }
};
</script>